<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  height: {
    type: Number,
    default: 180
  }
})
//可视窗口高度
const wh = window.innerHeight
const navList = ref([
  {
    type: '新型基础设施',
    classify: {
      地面系统:
        '<p><i>新联智通（深圳）卫星技术有限公司</i>、星瀚时空（深圳）航天智能科技有限公司</p>',
      通导遥: '<p>星瀚时空（深圳）航天智能科技有限公司</p>',
      起降设施: '<p>暂无</p>',
      空管系统: '<p>暂无</p>'
    }
  },
  {
    type: '运营及服务',
    classify: {
      运营分成:
        '<p><i>深圳市东部通用航空有限公司</i>、<i>鹍航（深圳）国际智能科技有限公司</i>、深圳智航幽浮科技有限公司、深圳运飞智能有限公司、小飞德天通用航空（深圳）有限公司</p>',
      飞行培训:
        '<p>深圳市东部通用航空有限公司、鹍航（深圳）飞行科技有限公司、深圳市智薪科技服务有限公司、智远海外人才服务（深圳）有限公司、深圳市中深力发展科技有限公司、<i>空天有为（深圳）航空发展有限公司</i></p>',
      服务咨询: '<p><i>深圳华旅航空发展有限公司</i></p>',
      整机销售:
        '<p>鹍航（深圳）国际智能科技有限公司、深圳市安飞智能服务有限公司、北斗卫星神州科技（深圳）有限公司、广东亚华通用航空有限公司、北熊智安科技（深圳）有限公司、中飞智能制造（深圳）有限公司、<i>深圳兴汇航空科技有限公司</i>、深圳玉龙无人机技术有限公司</p>'
    }
  },
  {
    type: '空中飞行保障',
    classify: {
      飞行保障: '<p>暂无</p>',
      低空服务平台: '<p><i>工业和信息化部电子第五研究所（赛宝）</i></p>',
      无人机反制: '<p>暂无</p>',
      空中交通管制服务: '<p>暂无</p>'
    }
  },
  {
    type: '应用场景',
    classify: {
      物流: '<p>蒙泰空链科技（深圳）有限责任公司、<i>深圳运飞智能有限公司</i>、北熊智安科技（深圳）有限公司</p>',
      旅游: '<p><i>深圳市东部通用航空有限公司</i>、鹍航（深圳）国际智能科技有限公司、深圳智航幽浮科技有限公司、深圳运飞智能有限公司、小飞德天通用航空（深圳）有限公司、深圳鸿鹄通用航空有限公司</p>',
      '农业植保、应急救援、巡检、消防': '<p><i>深圳玉龙无人机技术有限公司</i></p>',
      智慧城市: '<p>暂无</p>'
    }
  }
])
const navbar = ref(navList.value[0].type)
const contentJson = ref(navList.value[0].classify)
const choseBar = (item) => {
  navbar.value = item.type
  contentJson.value = item.classify
}

const h = computed(() => {
  return (props.height / 100) * (wh / 1080) + 'rem'
})
</script>

<template>
  <div class="card">
    <CommonTitle title="下游企业总览" />
    <div class="navbox">
      <p
        v-for="(item, index) in navList"
        :key="index"
        @click="choseBar(item)"
        :class="{ active: navbar == item.type }"
      >
        {{ item.type }}
      </p>
    </div>
    <div class="content" :style="{ maxHeight: h }">
      <div class="left">
        <p v-for="(v, k) in contentJson" :key="k">{{ k }}</p>
      </div>
      <div class="right">
        <p v-for="(v, k) in contentJson" :key="k" v-html="v"></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 15px;

  .navbox {
    display: flex;
    margin: 5px 20px;

    p {
      flex: 1;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: #85b9cb;
      cursor: pointer;
      background: url('@img/industry/nochose.png');
      background-size: 100% 100%;

      &.active {
        color: #fff;
        background: url('@img/industry/chosed.png');
        background-size: 100% 100%;
      }
    }
  }

  .content {
    display: flex;
    margin: 12px 20px;
    max-height: 180px;
    overflow-y: auto;

    .left {
      width: 130px;
      height: 100%;
      background: url('@img/industry/overview_left.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;

      p {
        height: 110px;
        padding: 12px;
        line-height: 16px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #afebff;
      }
    }

    .right {
      flex: 1;
      margin-left: 6px;
      p {
        height: 110px;
        padding: 12px 15px;
        display: flex;
        line-height: 16px;
        align-items: center;
        background: rgba(0, 213, 255, 0.1);

        :deep {
          i {
            color: #ffe100;
            font-style: normal;
          }
        }

        &:nth-child(even) {
          background: rgba(28, 115, 132, 0.1);
        }
      }
    }
  }
}
</style>
